<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./vue.js"></script>
</head>
<style>
</style>
<body>
  <div class="app">
    <div class="form">
      <div>姓名: <input type="text" v-model.trim.lazy="form.username"></div>
      <div>年龄: <input type="number" v-model.number="form.age"></div>
      <div>性别: 
        <input type="radio" name="sex" value="男" v-model="form.sex"> 男
        <input type="radio" name="sex" value="女" v-model="form.sex"> 女
      </div>
      <div>
        <!-- v-model 传入 boolean 类型就获取 input 的 checked 属性 -->
        婚姻状况: <input type="checkbox" v-model="form.married"> 已婚
      </div>
      <div>爱好: 
        <!-- 传入数组就获取 input 的 value 属性 -->
        <input type="checkbox" value="唱歌" v-model="form.hobby"> 唱歌
        <input type="checkbox" value="跳舞" v-model="form.hobby"> 跳舞
        <input type="checkbox" value="rap" v-model="form.hobby"> rap
        <input type="checkbox" value="篮球" v-model="form.hobby"> 篮球
      </div>
      <div>
        地址：
        <select  v-model="form.address">
          <option value="beijing">北京</option>
          <option value="shanghai">上海</option>
          <option value="guangzhou">广州</option>
        </select>
      </div>
      <div>
        备注：<textarea  v-model="form.remark"></textarea>
      </div>
    </div>
    <button @click="submit">提交</button>
    <button @click="reset">重置</button>
    <hr />
    {{ form }}
  </div>

  <script>

    // 实例化 vue 对象
    const vm = new Vue({
      el: '.app', // 挂载的元素，能使用 vue 语法的元素
      data: { // 定义 vue 数据，data 中的数据会添加到 vue 实例中
        form: {
          username: '',
          age: '',
          sex: '',
          married: false,
          hobby: [],
          address: '',
          remark: ''
        }
      },
      methods: { // 定义函数，函数中的 this 指向 vue 实例对象，函数不能是箭头函数
        submit() {
          console.log(this.form)
        },
        reset() {
          this.form = {
            username: '',
            age: '',
            sex: '',
            married: false,
            hobby: [],
            address: '',
            remark: ''
          }
        }
      }
    })

  </script>
</body>
</html>